<template>
  <div class="cart">
    <kl-head :title="title"></kl-head>
    <div class="container">
      <div class="goods-list clearfix"
           v-for="(item, i) in carList"
           :key="item.id">
        <!-- 开关选项 -->
        <mt-switch v-model="$store.getters.getSelected[item.id]"
                   @change="changeSelected(item.id,$store.getters.getSelected[item.id])"></mt-switch>
        <!-- 商品图片 -->
        <img src="https://i8.mifile.cn/a1/pms_1550642240.48638886.jpg"
             class="goods-img">
        <!-- 商品标题 -->
        <h3>{{ item.title }}</h3>
        <p class="price">售价{{ item.price }}元</p>
        <!-- 操作 -->
        <div class="operation">
          <!-- 添加购物车商品的数量获取：在getters中设置一个空对象，循环遍历car，将car中对应的id设为空对象的属性名，
          将car中对应的count设为空对象的属性值，通过对应的id访问到对应的商品数量,转递给cart-numbox组件
           -->
          <cartnumbox :initCount="$store.getters.getNumboxCount[item.id]"
                      :goodsid="item.id"></cartnumbox>
          <span class="del"
                @click="remove(item.id, i)">删除</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import klHead from '../public/head.vue'
import cartnumbox from '../public/cart-numbox.vue'
export default {
  data () {
    return {
      title: '购物车',
      carList: []
    }
  },
  created () {
    this.getCarList()
  },
  mounted () {
  },
  methods: {
    getCarList () {
      this.$store.state.car.forEach(item => {
        this.carList.push(item)
      })
    },
    remove (id, index) {
      // 点击删除按钮，通过id删除store中car对应的商品数据，通过index删除goodslist组件中的对应商品的数据carList
      this.carList.splice(index, 1)
      this.$store.commit('removeOneCar', id)
    },
    changeSelected (id, val) {
      // console.log(id + '--------------' + val)
      this.$store.commit('updataSelected', { id, selected: val })
    }
  },
  components: {
    klHead,
    cartnumbox
  }
}
</script>
<style lang="less" scoped>
.cart {
  .container {
    margin-top: 70rem / @baseFontSize;
    margin-bottom: 50px;
    .goods-list {
      margin: 10rem / @baseFontSize;
      padding: 10rem / @baseFontSize;
      border: 1px solid #ccc;
      border-radius: 5px;
      position: relative;
      .mint-switch {
        float: left;
        height: 200rem / @baseFontSize;
      }
      .goods-img {
        width: 200rem / @baseFontSize;
        // height: 180rem / @baseFontSize;
        height: 100%;
        vertical-align: middle;
        border: 1px solid #999;
        box-shadow: 0 0 2px #999;
        float: left;
        margin: 0 20rem / @baseFontSize;
      }
      h3 {
        text-align: center;
        font-size: 28rem / @baseFontSize;
        // line-height: 40rem / @baseFontSize;
      }
      .price {
        color: red;
        text-align: left;
        padding: 30rem / @baseFontSize 0;
        font-size: 20rem / @baseFontSize;
      }
      .operation {
        position: absolute;
        width: 100%;
        bottom: 20rem / @baseFontSize;
        left: 350rem / @baseFontSize;
        .del {
          font-size: 30rem / @baseFontSize;
          color: orange;
          padding-left: 15rem / @baseFontSize;
        }
      }
    }
  }
}

.mui-numbox {
  width: 180rem / @baseFontSize;
  height: 60rem / @baseFontSize;
  padding: 0;
}
</style>
